<template>
  <div class="container">
    <!-- <el-button
      v-for="(item, idx) in routerList"
      :key="idx"
      type="primary"
      size="default"
      @click="goPage(item)"
      >{{ item.meta }}</el-button
    > -->
    <div class="leftMenu" style="overflow: scroll;">
      <!-- <h2>菜单</h2> -->
      <el-menu background-color="#e5fff5" default-active="1-1" class="el-menu-vertical-demo">
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>基本</span>
          </template>
          <el-menu-item @click="goPage(item)" index="1-1" v-for="(item, idx) in menuList" :key="idx"
            >{{item.meta}}</el-menu-item
          >
        </el-submenu>
        <!-- <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>基本</span>
          </template>
          <el-menu-item index="1-1" v-for="(item, idx) in routerList" :key="idx"
            >选项1</el-menu-item
          >
        </el-submenu> -->
      </el-menu>
    </div>
    <router-view class="rightCont"></router-view>
  </div>
</template>

<script>
import { routerList } from "../router/routes";

export default {
  name: "md",
  data() {
    return {
      routerList,
      menuList: []
    };
  },
  created() {
    this.menuList = this.routerList[1].children
  },
  mounted() {
    this.$router.push({
      path: this.routerList[1].children[this.routerList[1].children.length - 1]
        .path,
    });
  },
  methods: {
    goPage(item) {
      this.$router.push({
        path: item.path,
      });
    },
  },
};
</script>

<style scoped>
.leftMenu {
  position: absolute;
  left: 30px;
  width: 15%;
  height: 80%;
  padding: 20px;
  background-color: #eee;
  border-radius: 6px;
}

.rightCont {
  position: absolute;
  right: 60px;
  width: 75%;
}
</style>
